<template>
  <div class="item">
    <Top></Top>
    <div class="con2">
      <Title></Title>
      <ul class="herolist-nav">
        <li :class="{current:index===setcurrent}" v-for="(item,index) in getdata1" :key="item.id">
          <router-link :to="item.path" class="herolist-tab">{{item.name}}</router-link>
        </li>
      </ul>
      <div class="item-box">
        <div class="herolist-box">
          <div class="herolist-type clearfix">
            <ul class="type-ms clearfix">
              <li
                v-for="(getheroms,index) in getheroms"
                :key="getheroms.id"
                @click="getswitch(index)"
              >
                <span class="ms-wai">
                  <i class="i" :class="{current:itemxixi===index}"></i>
                </span>
                <label>{{getheroms.name}}</label>
              </li>
            </ul>

            <ul class="type-ms clearfix" id="ms1">
              <li
                v-for="(getheroms1,index) in getheroms1"
                :key="getheroms1.id"
                @click="getmode(index)"
              >
                <span class="ms-wai">
                  <i class="i" :class="{current:index===itemhaha}"></i>
                </span>
                <label>{{getheroms1.name}}</label>
              </li>
            </ul>

            <ul class="type-ms clearfix" id="ms2">
              <li
                v-for="(getheroms2,index) in getheroms2"
                :key="getheroms2.id"
                @click="getele(index)"
              >
                <span class="ms-wai">
                  <i class="i" :class="{current:index===itemhehe}"></i>
                </span>
                <label>{{getheroms2.name}}</label>
              </li>
            </ul>
            <div class="type-search">
              <input type="text" placeholder="请输入你想要搜索的英雄" id="search" @input="search" />
              <i class="el-icon-search"></i>
            </div>
          </div>
          <div class="herolist-conents">
            <ul class="herolist">
              <li
                v-for="(herolist,index) in herolist"
                :key="herolist.id"
                @mousemove="getremove(index)"
                @mouseover="getover(herolist.img,herolist.item_name,herolist.des1,herolist.des2,herolist.price,herolist.total_price,herolist.itemnamezwm_cd,herolist.itemlvzbdj_96,herolist.des1zbsx_a6)"
                @mouseout="getout()"
                clsss="xiji"
              >
                <p >
                  <img :src="herolist.img" alt style="width:83px; height:83px" />
                  {{herolist.item_name||herolist.itemnamezwm_cd}}
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div id="zouni">
      <div class="zouni">
        <img :src="img" alt />
        <span class="name">{{name}}</span>
        <span class="price">售价:{{price}}</span>
        <span class="price">总价:{{total_price}}</span>
      </div>
      <p v-html="des1">{{des1}}</p>
      <p v-html="des2">{{des2}}</p>
    </div>
    <div id="zouni2">
      <div class="zouni">
        <img :src="img" alt />
        <span class="name">{{name}}</span>
        <span class="price">等级:{{price}}</span>
      </div>
      <p v-html="des1">{{des1}}</p>
    </div>
    <Buttom></Buttom>
  </div>
</template>
<script>
import Title from '../../components/title'
import Top from '../../components/Top'
import Buttom from '../../components/Buttom'
export default {
  data: () => ({
    name: '',
    img: '',
    price: '',
    total_price: '',
    des1: '',
    des2: '',
    herolist: [],
    itemxixi: 0,
    itemhaha: 0,
    itemhehe: 0,
    setcurrent: 1,
    getdata1: [
      {
        id: 0,
        name: '英雄',
        path: 'gamedata'
      },
      {
        id: 1,
        name: '局内道具',
        path: 'item'
      },
      {
        id: 2,
        name: '召唤师技能',
        path: 'summoner'
      }
    ],
    getheroms1: [
      {
        id: 0,
        name: '全部'
      },
      {
        id: 1,
        name: '攻击'
      },
      {
        id: 2,
        name: '法术'
      },
      {
        id: 3,
        name: '防御'
      },
      {
        id: 4,
        name: '移动'
      },
      {
        id: 5,
        name: '打野'
      },
      {
        id: 6,
        name: '辅助'
      }
    ],
    getheroms2: [
      {
        id: 0,
        name: '全部'
      },
      {
        id: 1,
        name: '装备'
      },
      {
        id: 2,
        name: '道具'
      },
      {
        id: 3,
        name: '额外技能'
      }
    ],
    getheroms: [
      {
        id: 0,
        name: '常规模式'
      },
      {
        id: 1,
        name: '边境突围模式'
      }
    ]
  }),
  created () {
    this.getrun()
  },
  methods: {
    async getrun () {
      const data1 = await this.$axios.get('http://localhost:8080/getitem')
      this.herolist = data1.data
    },
    async getswitch (index) {
      document.querySelector('#search').value = ''
      var Ms1 = document.querySelector('#ms1')
      var Ms2 = document.querySelector('#ms2')
      if (index === 0) {
        Ms2.style.display = 'none'
        Ms1.style.display = 'block'
        const data1 = await this.$axios.get('http://localhost:8080/getitem')
        var OUi2 = document.querySelectorAll('.type-ms')[1]
        var OiAll2 = OUi2.querySelectorAll('.i')
        OiAll2.forEach(el => {
          el.style.background = 'none'
        })
        OiAll2[0].style.background = 'blue'
        this.itemxixi = index
        this.herolist = data1.data
      } else {
        Ms1.style.display = 'none'
        Ms2.style.display = 'block'
        const data2 = await this.$axios.get('http://localhost:8080/getitem2')
        this.herolist = data2.data
        this.itemxixi = index
        var OUi3 = document.querySelectorAll('.type-ms')[2]
        var OiAll3 = OUi3.querySelectorAll('.i')
        OiAll3.forEach(el => {
          el.style.background = 'none'
        })
        OiAll3[0].style.background = 'blue'
      }
    },
    async getmode (index) {
      document.querySelector('#search').value = ''
      var OUi2 = document.querySelectorAll('.type-ms')[1]
      var OiAll2 = OUi2.querySelectorAll('.i')
      OiAll2.forEach(el => {
        el.style.background = 'none'
      })
      OiAll2[index].style.background = 'blue'
      var newarr = []
      const data = await this.$axios.get('http://localhost:8080/getitem')
      const list = data.data
      if (index === 0) {
        newarr = list
      } else {
        if (index === 6) {
          index = 7
        }
        for (var i = 0; i < list.length; i++) {
          if (list[i].item_type === index) {
            newarr.push(list[i])
          }
        }
      }
      this.herolist = newarr
    },
    async getele (index) {
      document.querySelector('#search').value = ''
      var OUi3 = document.querySelectorAll('.type-ms')[2]
      var OiAll3 = OUi3.querySelectorAll('.i')
      OiAll3.forEach(el => {
        el.style.background = 'none'
      })
      OiAll3[index].style.background = 'blue'
      var newarr = []
      const data = await this.$axios.get('http://localhost:8080/getitem2')
      const list = data.data
      if (index === 0) {
        newarr = list
      } else {
        for (var i = 0; i < list.length; i++) {
          // eslint-disable-next-line eqeqeq
          if (list[i].itemtypezbfl_30 == index) {
            newarr.push(list[i])
          }
        }
      }
      this.herolist = newarr
    },
    async search () {
      if (this.itemxixi === 0) {
        var newarr = []
        var OUi2 = document.querySelectorAll('.type-ms')[1]
        var OiAll2 = OUi2.querySelectorAll('.i')
        OiAll2.forEach(el => {
          el.style.background = 'none'
        })
        OiAll2[0].style.background = 'blue'
        var Search = document.querySelector('#search').value
        const data = await this.$axios.get('http://localhost:8080/getitem')
        var list = data.data
        for (var i = 0; i < list.length; i++) {
          if (list[i].item_name.indexOf(Search) !== -1) {
            newarr.push(list[i])
          }
        }
        this.herolist = newarr
      }
      if (this.itemxixi === 1) {
        var newarr1 = []
        var OUi3 = document.querySelectorAll('.type-ms')[2]
        var OiAll3 = OUi3.querySelectorAll('.i')
        OiAll3.forEach(el => {
          el.style.background = 'none'
        })
        OiAll3[0].style.background = 'blue'
        var Search1 = document.querySelector('#search').value
        const data2 = await this.$axios.get('http://localhost:8080/getitem2')
        var list1 = data2.data
        for (var j = 0; j < list1.length; j++) {
          if (list1[j].itemnamezwm_cd.indexOf(Search1) !== -1) {
            newarr1.push(list1[j])
          }
        }
        this.herolist = newarr1
      }
    },
    // 获取鼠标位置的函数
    getMousePos (event) {
      var e = event || window.event
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop
      var x = e.pageX || e.clientX + scrollX
      var y = e.pageY || e.clientY + scrollY
      return { x, y }
    },
    getremove (index) {
      var bodywidth = document.body.clientWidth
      var mes = this.getMousePos()
      var x = mes.x
      var y = mes.y
      var Ox = bodywidth - mes.x
      if (Ox < 270) {
        x = mes.x - 320
      }
      var zouni = document.querySelector('#zouni')
      zouni.style.left = x + 30 + 'px'
      zouni.style.top = y - 30 + 'px'
      var zouni2 = document.querySelector('#zouni2')
      zouni2.style.left = x + 30 + 'px'
      zouni2.style.top = y - 30 + 'px'
    },
    getover (img, name, des1, des2, price, total, name2, price2, des3) {
      var bodywidth = document.body.clientWidth
      var mes = this.getMousePos()
      var x = mes.x
      var y = mes.y
      var Ox = bodywidth - mes.x
      if (Ox < 270) {
        x = mes.x - 460
      }
      if (this.itemxixi === 0) {
        this.img = img
        this.name = name
        this.des1 = des1
        this.des2 = des2
        this.price = price
        this.total_price = total
        var zouni = document.querySelector('#zouni')
        zouni.style.display = 'block'
        zouni.style.position = 'absolute'
        zouni.style.left = x + 30 + 'px'
        zouni.style.top = y - 30 + 'px'
      }
      if (this.itemxixi === 1) {
        this.img = img
        this.name = name2
        this.des1 = des3
        this.price = price2
        var zouni2 = document.querySelector('#zouni2')
        zouni2.style.display = 'block'
        zouni2.style.position = 'absolute'
        zouni2.style.left = x + 30 + 'px'
        zouni2.style.top = y - 30 + 'px'
      }
    },
    getout () {
      var zouni = document.querySelector('#zouni')
      var zouni2 = document.querySelector('#zouni2')
      zouni.style.display = 'none'
      zouni2.style.display = 'none'
    }
  },
  components: {
    Title,
    Top,
    Buttom
  }
}
</script>
<style lang="less" scoped>
.item {
  position: relative;
  .clearfix:after {
    content: ' ';
    visibility: hidden;
    display: block;
    clear: both;
  }
  background: url(https://game.gtimg.cn/images/yxzj/web201605/page/ny_con_bg.jpg) no-repeat;
  background-size: cover;
  #zouni,
  #zouni2 {
    border: 1px solid #459ef4;
    padding: 20px;
    display: none;
    width: 200px;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    color: red;
    p {
      color: #369ff9;
    }
    .zouni {
      height: 80px;
      img {
        width: 74px;
        height: 74px;
        float: left;
        margin-right: 20px;
        opacity: 1;
      }
      .name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 18px;
        font-weight: bold;
        color: #23ff28;
      }
      .price {
        color: #da951c;
      }
      span {
        margin-top: 4px;
        width: 100px;
        display: block;
        float: left;
        opacity: 1;
      }
    }
  }
  .con2 {
    margin: 0px;
    padding: 0px;
    padding-top: 40px;
    width: 1200px;
    margin: 0 auto;
    .herolist-nav {
      margin: 0px;
      padding: 0px;
      margin-top: 20px;
      height: 32px;
      font-size: 16px;
      li {
        float: left;
        text-align: center;
        width: 33.333333%;
        border-bottom: 3px solid #d4d4d4;
        list-style: none;
        a {
          color: #4b4b4b;
          text-decoration: none;
        }
      }
      .current {
        border-bottom: 3px solid #3589dd;
        color: #3589dd;
        a {
          color: #3589dd;
          text-decoration: none;
        }
      }
    }
    .item-box {
      margin: 0;
      padding: 0;
      margin-bottom: 50px;
      padding: 35px 28px;
      border: 2px solid #e8e8e8;
      border-top: 0;
      position: relative;
      .herolist-box {
        .herolist-type {
          margin: 0;
          padding: 0;
          color: #686869;
          #ms2 {
            display: none;
          }
          .type-ms {
            margin: 0;
            padding: 0;
            float: left;
            width: 900px;
            padding: 16px 0;
            height: 20px;
            line-height: 21px;
            li {
              margin: 0;
              padding: 0;
              float: left;
              padding-left: 15px;
              min-width: 90px;
              font-size: 14px;
              cursor: pointer;
              list-style: none;
              .ms-wai {
                float: left;
                width: 18px;
                height: 18px;
                margin-right: 7px;
                border: 1px solid #b3b3b3;
                border-radius: 50px;
                position: relative;
                .i {
                  display: inline-block;
                  position: absolute;
                  top: 3px;
                  left: 3px;
                  width: 12px;
                  height: 12px;
                  border-radius: 50px;
                }
                .current {
                  background-color: blue;
                }
              }
              label {
                float: left;
                cursor: pointer;
                line-height: 19px;
              }
            }
          }
          .type-search {
            position: absolute;
            top: 86px;
            right: 60px;
            border: 1px solid #d2d2d2;
            padding: 10px;
            height: 22px;
            width: 220px;
            #search {
              float: left;
              border: none;
              width: 80%;
              height: 22px;
              line-height: 20px;
              font-size: 12px;
              color: #747475;
              background: none;
              outline: none;
              background-color: rgba(0, 0, 0, 0); // 透明背景
            }
          }
        }
        .herolist-conents {
          margin-top: 40px;
          .herolist {
            margin: 0;
            padding: 0;
            margin-right: -50px;
            overflow: hidden;
            li {
              float: left;
              width: 87px;
              margin-bottom: 34px;
              margin-right: 30px;
              list-style: none;
              p {
                display: block;
                width: 100%;
                text-align: center;
                text-decoration: none;
                color: #000;
                img {
                  width: 83px;
                  height: 83px;
                  border: 2px solid #258df2;
                  border-radius: 10px 0 10px 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
